<template>
    <div>
        <el-card>
            <el-row :gutter="10">
                <el-dialog v-model="dialogFormSearch" :title="title" width="500" :before-close="cancelSearch">
                    <el-form :model="search">
                        <el-form-item label="用户名" label-width="100" label-position="top" prop="username">
                            <el-input v-model="search.username" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="手机号" label-width="100" label-position="top" prop="mobile">
                            <el-input v-model="search.mobile" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="邮箱" label-width="100" label-position="top" prop="email">
                            <el-input v-model="search.email" placeholder="请输入邮箱"></el-input>
                        </el-form-item>
                        <el-form-item label="性别" label-width="100" label-position="top" prop="gender">
                            <el-radio-group v-model="search.gender">
                                <el-radio value="男" size="small">男</el-radio>
                                <el-radio value="女" size="small">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="地址" label-width="100" label-position="top" prop="address">
                            <el-input v-model="search.address" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="创建时间" label-width="100" label-position="top" prop="times">
                            <el-input v-model="search.intodata" placeholder=""></el-input>
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <div class="dialog-footer">
                            <el-button @click="cancelSearch">取消</el-button>
                            <el-button type="primary" @click="searchMember('搜索成功')">
                                搜索
                            </el-button>
                        </div>
                    </template>
                </el-dialog>
            </el-row>
            <el-row style="margin-top: 10px;">
                <el-col :span="2">
                    <el-button type="danger" @click="deleteColumnByIds">批量删除</el-button>
                </el-col>
                <el-col :span="2">
                    <el-button type="success" @click="addNoticeType">添加</el-button>
                </el-col>
                <el-col :span="2">
                    <el-button type="primary" @click="searchButton">搜索</el-button>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-table :data="memberStore.memberList" stripe border row-key="id" style="margin-top: 30px;"
                        @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="100" :reserve-selection="true" />
                        <el-table-column prop="id" label="ID" width="100" sortable />
                        <el-table-column prop="username" label="用户名" width="100">
                        </el-table-column>
                        <el-table-column prop="gender" label="性别" width="80"></el-table-column>
                        <el-table-column prop="mobile" label="电话" width="130">
                        </el-table-column>
                        <el-table-column prop="address" label="住址" width="200"></el-table-column>
                        <el-table-column prop="email" label="电子邮箱" width="200"></el-table-column>
                        <el-table-column prop="intodata" label="注册时间" width="150"></el-table-column>
                        <el-table-column label="操作">
                            <template #default="scope">
                                <el-button type="primary" size="small" @click="LookById(scope.row)">
                                    <svg-icon name="download" plain width="20px" height="15px"
                                        style="padding-right: 5px;"></svg-icon>
                                </el-button>
                                <el-button type="primary" size="small" @click="editColumnById(scope.row)">
                                    <svg-icon name="pen" width="20px" height="10px" style="padding-right: 5px;"></svg-icon>
                                </el-button>
                                <el-popconfirm width="220" :icon="InfoFilled" icon-color="#626AEF"
                                    :title="`确认删除 ${scope.row.username} 吗？`" @confirm="deleteColumnById(scope.row)">
                                    <template #reference>
                                        <el-button type="danger" size="small">
                                            <svg-icon name="delete" width="20px" height="15px"
                                                style="padding-right: 5px;"></svg-icon>
                                        </el-button>
                                    </template>
                                    <template #actions="{ confirm, cancel }">
                                        <el-button size="small">不!</el-button>
                                        <el-button type="danger" size="small" @click="confirm">
                                            确认？
                                        </el-button>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
            <el-dialog v-model="dialogFormVisible" :title="title" width="500" :before-close="cancel">
                <el-form :model="form" :rules="rules">
                    <el-form-item v-if="lookfilg" label="用户ID" label-width="100" label-position="top" prop="id">
                        <el-input v-model="form.id" placeholder="" :disabled="lookfilg"></el-input>
                    </el-form-item>
                    <el-form-item label="用户名" label-width="100" label-position="top" prop="username">
                        <el-input v-model="form.username" placeholder="" :disabled="lookfilg"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" label-width="100" label-position="top" prop="mobile">
                        <el-input v-model="form.mobile" autocomplete="off" :disabled="lookfilg" />
                    </el-form-item>
                    <el-form-item label="邮箱" label-width="100" label-position="top" prop="email">
                        <el-input v-model="form.email" placeholder="请输入邮箱" :disabled="lookfilg"></el-input>
                    </el-form-item>
                    <el-form-item label="性别" label-width="100" label-position="top" prop="gender">
                        <el-radio-group v-model="form.gender" :disabled="lookfilg">
                            <el-radio value="男" size="small">男</el-radio>
                            <el-radio value="女" size="small">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="地址" label-width="100" label-position="top" prop="address">
                        <el-input v-model="form.address" placeholder="" :disabled="lookfilg"></el-input>
                    </el-form-item>
                    <el-form-item v-if="lookfilg" label="创建时间" label-width="100" label-position="top" prop="times">
                        <el-input v-model="form.intodata" placeholder="" :disabled="lookfilg"></el-input>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="cancel">取消</el-button>
                        <el-button v-if="!lookfilg" type="primary" @click="saveOrUpdata">
                            保存
                        </el-button>
                    </div>
                </template>
            </el-dialog>
            <el-row>
                <el-col :span="24">
                    <el-pagination @current-change="searchMember()" @size-change="searchMember()" size="small"
                        v-model:current-page="pageNo" v-model:page-size="limit" :page-sizes="[3, 5, 10, 20]"
                        :total="memberStore.total" :background="true" layout="prev, pager, next, jumper,->,sizes, total"
                        style="margin-top: 20px;text-align: center;">
                    </el-pagination>
                </el-col>
            </el-row>
        </el-card>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import useMemberStore from '@/store/modules/member'
import { InfoFilled } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
let memberStore = useMemberStore()



let title = ref("")
let pageNo = ref(1)
let limit = ref(3)

let lookfilg = ref(false)


let form = ref({
    id: null,
    username: null,
    gender: null,
    mobile: null,
    address: null,
    email: null,
    intodata: null,
})

let search = ref({
    username: "",
    gender: '',
    mobile: '',
    address: '',
    email: '',
    intodata: ''
})

const select_order_number = ref('') //表格select选中的条数
const select_orderId = ref([]) //表格select复选框选中的id
const multipleSelection = ref([])

let dialogFormSearch = ref(false) //控制搜索弹窗的显示与隐藏

let dialogFormVisible = ref(false) //控制新增弹窗的显示与隐藏

//当表格选择项发生变化时会触发该事件
const handleSelectionChange = (val) => {
    // 解决来回切换页面，也无法清除上次选中情况
    multipleSelection.value = val;
    select_order_number.value = multipleSelection.value.length;
    select_orderId.value = [];
    if (val) {
        undefined;
        val.forEach((row) => {
            undefined;
            if (row) {
                undefined;
                select_orderId.value.push(row.id);
            }
        });
    }
}

const addNoticeType = () => {
    dialogFormVisible.value = true
    form.value = {
        id: null,
        username: null,
        gender: null,
        mobile: null,
        address: null,
        email: null,
        intodata: null,
    }
}

const cancel = () => {
    dialogFormVisible.value = false
    lookfilg.value = false
}

const cancelSearch = () => {
    dialogFormSearch.value = false
}

const saveOrUpdata = () => {
    if (form.value.id) {
        //修改
        memberStore.updateMember(form.value).then((reslut) => {
            cancel()
            searchMember()
        })
    } else {
        //新增
        memberStore.addMember(form.value).then((reslut) => {
            cancel()
            searchMember()
        })
    }

}


const searchMember = (message) => {
    //将数据JSON话
    let data = JSON.stringify({
        search: search.value,
        pageStart: (pageNo.value - 1) * limit.value,
        pageEnd: limit.value,
    })

    memberStore.searchMember(data).then((reslut) => {
        if (message != undefined) {
            if (reslut) {
                ElMessage.success("搜索成功")
            } else {
                ElMessage.error("搜索失败")
            }
        } else {
            return;
        }
    })
    dialogFormSearch.value = false
    search.value = {
        username: "",
        gender: '',
        mobile: '',
        address: '',
        email: '',
        intodata: ''
    }
}

const searchButton = () => {
    dialogFormSearch.value = true
    search.value = {
        username: "",
        gender: '',
        mobile: '',
        address: '',
        email: '',
        intodata: ''
    }

}

const editColumnById = (row) => {
    form.value = row
    dialogFormVisible.value = true

}

const LookById = (row) => {
    lookfilg.value = true
    form.value = row
    dialogFormVisible.value = true
}

onMounted(() => {
    searchMember()
})

const deleteColumnById = (row) => {
    memberStore.deleteMemberById(row.id).then((reslut) => {
        if (reslut) {
            searchMember()
        }
    })

}

const deleteColumnByIds = () => {
    memberStore.deleteMemberByIds(select_orderId.value).then((reslut) => {
        if (reslut) {
            searchMember()
        }

    })
}

const rules = {
    username:
        [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    mobile:
        [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            { pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
    email:
        [
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/, message: '请输入正确的邮箱', trigger: 'blur' }
        ],
    role:
        [{ required: true, message: '请输入角色', trigger: 'blur' }],
}


</script>

<style scoped lang="scss"></style>
